<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" back-text="返回"
		 title="挖机管理">
			<view class="navbar-right" slot="right" @click="addExcavator()">添加</view>
		</u-navbar>
		<view class="content">
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<u-row gutter="16">
					<u-col span="3" @tap="openDetails(item.carId)">
						<view class="item-box">
							<!-- <u-lazy-load class="lazy-img" height="160px" loading-img="../../../static/excavator.jpg" :image="item.logo" v-if="item.logo" img-mode="scaleToFill"></u-lazy-load> -->
							<!-- <u-lazy-load class="lazy-img" height="160px" loading-img=".../../../static/excavator.jpg" image="../../../static/excavator.jpg" v-else></u-lazy-load> -->
							<image :src="item.logo" mode="scaleToFill" lazy-load="true" v-if="item.logo"></image>
							<image src=".../../../static/excavator.jpg" mode="scaleToFill" lazy-load="true" v-else></image>
							
						</view>
					</u-col>
					<u-col span="7" @tap="openDetails(item.carId)">
						<view class="item-box">
							<view class="car-num">
								车牌号码：
								<text class="content-text">{{ item.carNumber }}</text>
							</view>
							<view class="car-type">
								司机姓名：
								<text class="content-text" >{{item.driverName}}</text>
							</view>
							<view class="car-type">
								联系电话：
								<text class="content-text" >{{item.driverPhone}}</text>
							</view>
						</view>
					</u-col>
					<u-col span="2" @tap="openDetails(item.carId)">
						<view class="item-box item-buttom">
							<!-- <u-button type="primary" @click="openDetails(item.id)">查看详情</u-button> -->
							<image class="left-img" src="../../../static/right.png" mode=""></image>
						</view>
					</u-col>
				</u-row>
			</view>

			<!-- 下拉加载显示 -->
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus" :contentText="text"></uni-load-more>
			</view>
		</view>
		<kModel ref="kModel" />
		
		<view class="divider">
			<u-divider bg-color="#eaf1ff">END</u-divider>
		</view>
		
	</view>
</template>

<script>
	import {
		readCarList
	} from '@/api/car.js'
	// import kModel from '@/components/k-model/k-model.vue'
	export default {
		data() {
			return {
				barbg: {
					background: '#5c92ff'
				},
				backText: {
					color: '#FFFFFF',
					font: 800
				},
				loadStatus: 'loading',
				isLoadMore: false,
				isOnshow: true,
				prevPage: null,
				text: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: ""
				},
				queryInfo: {
					page: 1,
					count: 8,
					type: 2,
					action: "digger"
					
				},
				dataList: []
			};
		},
		components: {
			// kModel
		},
		// created() {
		// 	// console.log(uni.getStorageSync('id'))
		// 	// this.getCarList()
		// },
		// onPullDownRefresh() {
		// 	// console.log
		// 	this.getCarList(1)
		// },
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.queryInfo.page += 1
				this.getCarList(0)
			}
		},
		onShow() {
			var pages = getCurrentPages();
			this.prevPage = pages[pages.length - 1];
			if (this.prevPage.brand === true) {
				this.getCarList(0)
			}
			if (this.prevPage.delete === true){
				this.getCarList(0)
			}
			// console.log(brand)
			if (this.isOnshow === true) {
				this.getCarList(0)
			}
		},
		methods: {
			addExcavator() {
				uni.navigateTo({
					url: './addExcavator/index'
				});
			},
			openDetails(id) {
				uni.setStorageSync('carID', id)
				uni.navigateTo({
					url: './details/index?type=2'
				});
			},
			getCarList(type) {
				// if(this.isOnshow === true) {
				// 	this.$refs['kModel'].showModel({
				// 		type: 'loading',
				// 		title: '获取数据中',
				// 		style: 'circle',
				// 	})
				// }
				if(this.prevPage.delete === true){
					this.queryInfo.page = 1
					this.queryInfo.count = 8
				}
				this.queryInfo.projectId = uni.getStorageSync('id')
				readCarList(this.queryInfo).then(res => {
					console.log(res)
					if (res.code === 1) {
						if (res.result.data) {
							if(this.prevPage.brand === true){
								// this.dataList = this.dataList.concat(res.result.data.slice(res.result.data.length - 1))
								this.dataList.splice(0, 0, res.result.data.slice(res.result.data.length - 1)[0])
								this.prevPage.brand = false
							} else if (this.prevPage.delete === true){
								this.dataList = res.result.data
								this.prevPage.delete = false
							} else {
								this.dataList = this.dataList.concat(res.result.data)
							}
							// this.dataList = this.dataList.concat(res.result.data)
							if (res.result.data.length < this.queryInfo.count) {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
						if (this.page > 1) {
							this.page -= 1
						}
					}
					
					if (this.isOnshow === true) {
						this.isOnshow = false
					}
					// console.log(this.dataList)
				})
				if (type === 1) {
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 500)
					uni.showToast({
						title: "刷新成功",
						icon: "none"
					})
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.content {
		.item {
			padding: 20rpx;
			background-color: #ffffff;
			margin-bottom: 1rpx;

			.item-box {
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				image {
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 100;
				}

				.car-num .car-type {
					font-size: 30rpx;
					font-weight: normal;
					font-stretch: normal;
					// line-height: 75rpx;
					letter-spacing: 1rpx;
					color: #b1b8c8;
				}

				.content-text {
					font-weight: normal;
					font-stretch: normal;
					// line-height: 75rpx;
					letter-spacing: 1px;
					color: #2c3240;
					font-weight: bold;
				}
			}

			.item-buttom {
				// padding-top: 40rpx;
				text-align: right;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				.left-img{
					width: 20rpx;
					height: 29rpx;
				}
			}
		}
	}

	.divider {
		margin-top: 50rpx;
	}
</style>
